<template>
  <a-modal
    class="import-modal"
    v-model="visible"
    :title="$t('cloudpivot.form.runtime.biz.importData')"
    :width="552"
    :destroyOnClose="true"
    :footer="null"
    :mask="true"
    @cancel="reset"
    :maskClosable="false"
    :keyboard="false"
  >
    <sheet-upload
      v-if="showUploadModel || isImporting"
      @change="changeImportBtnStatus"
      @setFileName="setImportFileName"
      :sheetParams="sheetParams"
      :sheet="sheet"
    ></sheet-upload>

    <!-- 导入状态 -->
    <data-import-status
      v-if="showImportStatus"
      :successNum="successNum"
      :failNum="failNum"
      @cancel="reset"
      :getSheetImportCount="getSheetImportCount"
      :status="importStatus"
      :fileName="importFileName"
      :sheetParams="sheetParams"
      :errorFile="errorFile"
    ></data-import-status>

    <div class="modal-footer">
      <!-- 取消 -->
      <a-button v-if="showCancelButton" key="back" @click="handleCancel">{{
        $t("cloudpivot.form.runtime.biz.cancel")
      }}</a-button>

      <!-- 导入  @click="confirmImport" -->
      <a-button
        v-if="showUploadModel || isImporting"
        key="import"
        type="primary"
        :disabled="!canImport"
        :loading="isImporting"
        @click="confirmImport"
        >{{ $t("cloudpivot.form.runtime.biz.startImport") }}</a-button
      >

      <!-- @click="confirm" -->
      <a-button
        v-if="showConfirmButton"
        key="confirm"
        type="primary"
        @click="handleCancel"
        >{{ $t("cloudpivot.form.runtime.biz.ok") }}</a-button
      >

      <!-- @click="reImport" -->
      <a-button
        v-if="showReImportButton"
        key="reimport"
        type="primary"
        @click="reImport"
        >{{ $t("cloudpivot.form.runtime.biz.reImport") }}</a-button
      >
    </div>
  </a-modal>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import SheetUpload from "./import/data-upload.vue";
import DataImport from "./import/data-import.vue";
import DataImportStatus from "./import/data-import-status.vue";
import { listApi, listParams } from "@cloudpivot/api";
// import { FormSheetControl } from "../../../controls";
import { UploadControl } from "@cloudpivot/form/src/common/controls/upload-control";
import { FormSheetControl } from "@cloudpivot/form/src/common/controls/form-sheet-control";
import { Button, Tooltip, Icon, Modal } from "@h3/antd-vue";

import { FormSheet } from "@cloudpivot/form/schema";

@Component({
  name: "dataimport",
  components: {
    AButton: Button,
    AModal: Modal,
    SheetUpload,
    DataImport,
    DataImportStatus,
  },
})
export default class Import extends Vue {
  @Prop() params!: any;

  @Prop() visible!: boolean;

  @Prop()
  sheet!: FormSheet;

  /**
   * 子表导入,导出代码
   *
   */
  modalVisible = true;
  isInitView: boolean = true;
  canImport: boolean = false;
  isUploading: boolean = false;
  importFileName: string = "";
  importPercent: number = 0;
  successNum: number = 0;
  failNum: number = 0;
  isImportEnd: boolean = false;
  isImporting: boolean = false;
  errorFile: string = "";
  showModal = false;
  getSheetImportCount: object = { select: 0, radio: 0, checkbox: 0 };
  // sheetParams:any = {}

  importSheet() {
    this.showModal = true;
  }

  get sheetParams() {
    // const formStatus:any = {
    //   'DRAFT': 0,
    //   'PROCESSING': 1,
    //   'CANCELLED': 2,
    //   'COMPLETED': 3
    // }

    // const params:any = Object.assign({},this.params);
    // params.sequenceStatus = formStatus[params.sequenceStatus];
    return this.params;
  }

  importStatus: listParams.ImportResult = listParams.ImportResult.None;

  get showUploadModel() {
    return this.isInitView;
  }

  get showConfirmButton() {
    return (
      this.importStatus === listParams.ImportResult.DataNumExceed ||
      this.importStatus === listParams.ImportResult.DataColumnError ||
      this.importStatus === listParams.ImportResult.PartialSuccess
    );
    // return this.failNum > 0 || this.failMessage || this.columnMatchError;
  }

  get showImportStatus() {
    return (
      !this.isImporting &&
      !this.isInitView &&
      this.importStatus !== listParams.ImportResult.None
    );
  }

  get showReImportButton() {
    // return this.networkError;
    return this.importStatus === listParams.ImportResult.SystemError;
  }
  // 取消按钮
  get showCancelButton() {
    return (
      this.isInitView ||
      this.importStatus === listParams.ImportResult.SystemError
    );
  }

  //  get showImportModel() {
  //   return this.isImporting;
  // }

  changeImportBtnStatus(status: boolean) {
    this.canImport = status;
  }

  setImportFileName(fileName: string) {
    this.importFileName = fileName;
  }

  /**
   * 数据导出
   */
  confirmImport() {
    this.isInitView = false;
    this.isUploading = false;
    const formStatus: any = {
      DRAFT: 0,
      PROCESSING: 1,
      CANCELLED: 2,
      COMPLETED: 3,
    };
    const params: any = Object.assign({}, this.params);
    params.fileName = this.importFileName;
    params.sequenceStatus = formStatus[params.sequenceStatus];
    // debugger
    UploadControl.service.getSheetDetail(params).then((res) => {
      if (res.errcode !== 0) {
        this.isImporting = false;
        this.importStatus = listParams.ImportResult.SystemError;
      }
      // else if (res.errcode === 0 && res.data.operationResult) {

      //   this.isImporting = false;

      //   this.$emit('repeatErrorHandle',res.data.data);
      // }
      else {
        this.isImporting = false;
        this.errorFile = res.data.fileName;
        const data = res.data.data;
        //  this.$emit('repeatErrorHandle',res.data);
        if (res.data.secondImportData && res.data.secondImportData.length > 0) {
          this.$emit("repeatErrorHandle", res.data);
          return;
        }
        this.getSheetImportCount = {
          select: res.data.dropdownMarkedCount,
          radio: res.data.radioMarkedCount,
          checkbox: res.data.checkboxMarkedCount,
        };

        // debugger
        // 导入数据回调
        if (data) {
          this.$emit("importFinishe", data);
        }

        this.importStatus = res.data.errorType;

        this.successNum = res.data.successCount;

        this.failNum = res.data.errorCount;
      }
    });
  }

  /**
   * 模拟导入处理进度
   */
  simulateImport() {
    let percent = 1;
    const interval = setInterval(() => {
      if (!this.isImportEnd) {
        if (percent <= 90) {
          percent += this.random(5);
          this.importPercent = percent;
        }
      } else {
        clearInterval(interval);
      }
    }, 3000);
  }

  /**
   * 产生随机整数
   */
  random(num: number) {
    return Math.ceil(Math.random() * 5);
  }

  /**
   * 导入结束（不管成功与失败）
   */
  importEnd(data: any) {
    // 此处需要定义数据结构
    // debugger
    this.isImporting = false;
    this.isImportEnd = true;
    this.importFileName = data.fileName;
    this.successNum = data.successCount;
    this.failNum = data.errorCount;
    this.importStatus = data.errorType;
  }

  reset() {
    this.isInitView = true;
    this.isUploading = false;
    this.isImporting = false;
    this.importPercent = 0;
    this.isImportEnd = false;
    this.successNum = 0;
    this.failNum = 0;
    this.canImport = false;
    this.importStatus = listParams.ImportResult.None;
    this.$emit("cancel");
  }
  /**
   * reset
   */
  handleCancel() {
    this.showModal = false;
    // this.$emit('cancel');
    this.reset();
  }

  /**
   * 重新导入
   */
  reImport() {
    this.reset();
  }
}
</script>